<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块的延迟解析与严格模式</title>
</head>
<script>
    console.log(document.querySelector('button'))  //null
    /*
        结果是null  很正常 因为代码的执行顺序是从上到下 执行到这一行的时候 html标签还没有创建  所以是null
    */
    name = 'jimmy'
    console.log('not module',name)
</script>
<script type="module">
    // 'sue strict'
    /*
        模块的延迟解析与严格模式
            严格模式  在所有语言中 我们尽量使应该都使用严格模式来开发的 这样可以让我们的代码更加健壮

            延迟解析 
                在JS中 script标签要不放在最上面 要不放在body里面是比较合理的  
                        js的代码执行顺序是从上到下的执行  但是当我们呢使用了模块化之后 script标签会延迟解析
    */
    console.log(document.querySelector('button'))  //此时结果是能够找到这button按钮的
    // 原因就是当我们script标签使用了模块化之后  会延迟解析  会等亚眠加载完毕之后再进行解析
    sex = 'xuexue'

    /*
        报错 因为使用了模块化之后会默认使用严格模式  再严格模式下是禁止程序员在不用变流修辞词的时候定义变量的
    */
    console.log(sex)  //sex is not defined


    /*
        总结  JS在使用了模块化开发之后会有两个特性
            1 会自动开辟严格模式  在严格模式下 只要是代码不规范  就会报错
            2 是会开启延迟加载  会等页面其他加载完毕之后才会执行JS的代码
    */
</script>
<body>
    <button>Jimmy</button>
</body>
</html>